<!DOCTYPE html>
<html lang="zh-cn">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>登录账号</title>
    <link rel="stylesheet" type="text/css" href="/js/passport-rew.min.css">
    <script src="/js/j.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>

    <!--注意这里的vue 要放到element 的index.js上面 不然会识别不到-->
    <script type="text/javascript" src="/vue.js"></script>
    <script type="text/javascript" src="/axios-0.18.0.js"></script>
    <script type="text/javascript" src="/index.js"></script>
    <link rel="stylesheet" type="text/css" href="/index.css">


</head>
<body>

<!-- logo -->
<div class="passport-header">
    <div class="logo container">
        <a href="#" class="logo-link"><img src="../images/index-logo.png"></a>
        <div class="have-account">没有账号？ <a href="/user/toRegister">请注册&gt;</a></div>
    </div>
</div>
<!-- logo End -->

<div class="passport-wrapper" id="main">
    <div class="container">
        <div class="passport-sign">
            <div class="active">登录蜗牛学堂</div>
            <!-- tab-group -->
            <div class="tab-group">
                <form method="post" action="#" class="passport-form passport-form-sign" id="regUser" name="form2">
                    <input type="hidden" value="regbase" name="dopost">
                    <input type="hidden" value="1" name="step">
                    <input type="hidden" value="个人" name="mtype">

                    <div class="form-item">
                        <i class="phone-icon"></i>
                        <input type="text" name="userid"  v-model="userRegisterDTO.phone" class="passport-txt xl w-full" id="txtUsername" placeholder="请输入手机号"
                               onkeyup="value=value.replace(/[^0-9^.]/g,'');" maxlength="11">
                        <p id="_userid"></p>
                    </div>
                    <div class="form-item form-mcode">
                        <i class="yzm-icon"></i>
                        <input type="text" name="mobilecode" v-model="userRegisterDTO.code" class="passport-txt yz w-full" id="mobilecode"
                               placeholder="请输入验证码" autocomplete="off">
                        <input id="zphone" type="button" @click="handleSendSms" :disabled="codeDisable" v-model="content" class="js-getcode">
                    </div>
                    <div class="form-item">
                        <button type="button" class="passport-btn" @click="handleLogin">立即登录</button>
                    </div>
                </form>
            </div>
            <!-- tab-group End -->
        </div>
    </div>
</div>


<!-- 底部版权 -->
<div class="footer-link">
    <div class="w1200">
        <ul>
            <li class="link">
                <a href="#about/index/" rel="nofollow">关于我们</a>
                <span class="sep">|</span>
                <a href="#about/banquan/" rel="nofollow">版权声明</a>
                <span class="sep">|</span>
                <a href="#about/lianxi/" rel="nofollow">联系我们</a>
                <span class="sep">|</span>
                <a href="#about/faq/" rel="nofollow">帮助中心</a>
                <span class="sep">|</span>
                <a href="#tequan/" rel="nofollow">VIP特权</a>
            </li>
        </ul>
        <p>Copyright © 2005-2020 蜗牛学堂 版权所有
            <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank"class="footer-yxw-gxb">粤ICP备xxxxxxxx号</a>
        </p>
    </div>
</div>
<!-- 底部版权 End -->
</body>

<script>
    new Vue({
        el: "#main",
        data: {
            userRegisterDTO: {},
            codeDisable: false,
            timeNum: 30,                // 倒计时的时间
            content: "获取验证码",
            timeLoop: 0,                // 定时任务
        },
        methods: {
            // 发送短信验证码
            handleSendSms(){
                // 1. 绑定数据模型
                // 2. 判断用户是否输入手机号码
                if(this.userRegisterDTO.phone == undefined || this.userRegisterDTO.phone.length == 0){
                    this.$message.warning("请输入手机号码");
                    return;
                }
                // 3. 判断手机号码格式是否正确(正则表达式)
                if (!/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/i.test(this.userRegisterDTO.phone)){
                    this.$message.warning("请输入正确手机号码");
                    return;
                }
                // 0. 设置按钮不可以被点击
                this.codeDisable = true;
                // 4. 通过axios发送异步请求，发送短信验证码
                axios.get("/user/sendSms/" + this.userRegisterDTO.phone + "/login").then(res => {
                    if(res.data.code == 200){
                        //这里调这个优化了点击后更快显示时间
                        this.doLoop()
                        // 表示成功
                        // 5. 倒计时的效果（通过定时器来完成）
                        this.timeLoop = setInterval(this.doLoop, 1000); // 每隔一秒去执行一次doLoop方法
                        // 6. 倒计时完成设置该按钮可以被点击
                    }else{
                        // 表示失败
                        this.$message.warning(res.data.message);
                        // 设置按钮可以被点击
                        this.codeDisable = false;
                    }
                });
            },

            doLoop(){
                // 准备工作：
                // 1. 定义一个倒计时的时间
                // 2. 将发送验证码按钮的文字进行双向绑定
                // 1. 倒计时的时间需要减1
                // 2. 判断倒计时的时间是否已经为0
                // 如果不为0：更改按钮的内容
                // 如果为0：1. 停止定时任务 2. 设置按钮可以被点击 3. 按钮的内容应该改为 “重新获取验证码” 4. 重置倒计时的时间
                this.timeNum--;
                this.content = "重新发送" + this.timeNum + "秒";
                if(this.timeNum <= 0){
                    this.timeNum = 30;
                    this.content = "重新获取验证码";
                    this.codeDisable = false;
                    clearInterval(this.timeLoop)
                }
            },
            // 立即登录
            handleLogin(){
                // 1. 对输入框里面的数据进行判断
                // 1. 判断用户是否填写手机号码
                if(!this.userRegisterDTO || !this.userRegisterDTO.phone || this.userRegisterDTO.phone.length == 0){
                    this.$message.warning("请输入手机号码");
                    return;
                }
                // 2. 判断手机号码格式是否正确
                if (!/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/i.test(this.userRegisterDTO.phone)) {
                    this.$message.warning("请输入正确的手机号码");
                    return;
                }
                // 3. 校验密码
                // if(!this.userRegisterDTO || !this.userRegisterDTO.password || this.userRegisterDTO.password.length == 0){
                //     this.$message.warning("请输入密码");
                //     return;
                // }
                // 4. 校验短信验证码
                if(!this.userRegisterDTO || !this.userRegisterDTO.code || this.userRegisterDTO.code.length == 0){
                    this.$message.warning("请输入验证码");
                    return;
                }
                // 2. 调用axios发送立即注册的异步请求
                axios.post("/user/login", this.userRegisterDTO).then(res => {
                    if(res.data.code == 200){
                        // 注册成功  // 3. 根据响应结果跳转页面
                        this.$message.success("登录成功");
                        //注意，这里不好传参数，所以登录成功后要把数据存储到后端session中,在index页面通过session来拿到需要的数据
                        location.href = "http://localhost/index"
                    }else{
                        this.$message.error(res.data.message);
                    }
                });
            }
        },
    });
</script>
</html>
